<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>确认订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/diancan.css" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/mui.picker.min.css" />
		<script src="__INDEX__/js/mui.min.js"></script>
		<link rel="stylesheet" href="__INDEX__/css/hykcz.css" />
	</head>
	<style>
		.dcyy_btn{width:100%;}
		.mui-bar .mui-btn{top: 0px;}
		.dcyy_btn button{height:3.5rem;}
		.top_room{margin: 10px;}
		.room_name{font-size: 16px;}
		.mask{background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none;}
		.phone_box{width: 80%; background: white; margin: 9rem auto 0; border-radius: 3px; padding: 4% 5% 5%;}
		.phonetc_bt{color: #000000; font-weight: bold; font-size: 1rem; margin-bottom: .1rem;}
		.phone_box .wz{font-size: .85rem; line-height: normal; margin-bottom: 1.2rem; color: #666666;}
		.phone_box input{border-color: #811588; padding: 10px; color: #000000; font-size: .85rem;}
		.phone_btn{background: #38ab3c; border: 0; width: 100%; height: 2.5rem; color: white; font-size: 1.1rem; margin-top: .5rem;}
		.phone_box .yzm_input{width: 52%; float: left;}
		.phone_box input{    line-height: 21px;width: 100%;height: 40px; margin-bottom: 15px;padding: 10px 15px;-webkit-user-select: text;border: 1px solid rgba(0,0,0,.2);border-radius: 3px;outline: 0;background-color: #fff; -webkit-appearance: none;}
		.detl{border-bottom: 1px solid #CCCCCC;}
		.detl label{width:40%}
		.detl label~input{width:60%}
		.xhd_list {padding: 1rem 0 0rem;}
		.sign_out{float:right;margin:-2.2rem;border:1px solid #CCCCCC;border-radius: 100px;width:30px;height: 30px;text-align: center;}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
			<h1 class="mui-title">确认订单</h1>
		</header>
		<nav class="mui-bar mui-bar-tab" style="height: 50px;">
			<a href="javascript:void(0);" class="mui-tab-item" style="width: 100%; text-align: left; padding-left: 3%;color:#000000">合计：<em id='z_price' style='font-size: 16px;'>¥{$list['room_num'] == 0 ? 0 : $list['room_price']}</em></a>
			<a href="javascript:$('.detailed').show();" class="mui-tab-item" style="width: 100%; text-align: left; padding-left: 15%;font-size:16px;color:#2783e7">明细</a>
			<a href="javascript:que_show();" class="mui-tab-item" style="width: 7rem;height: 100%;">
				<div class="dcyy_btn"><button type="button" class="mui-btn order">提交订单</button></div>
			</a>
		</nav>
		<div class="mui-content" style="background: white;">
			<form id="form" class="mui-input-group ddyy_list">
				<div class='top_room'>
					<div class='room_name'>{$list['store_name']}</div>
					<div><span class="iconfont icon-dingwei"></span>{$list['store_address']}</div>
					<div><span class="iconfont icon-fangzi"></span>房型:{$list['room_name']}</div>
					<div><span class="iconfont icon-dingdan"></span>入住时间：{$start_time}  退房时间：{$end_time}</div>
				</div>
				<div class="mui-input-row">
					<label>房间数：</label>
					<div class="mui-numbox">
						<button class="mui-btn mui-btn-numbox-minus" onclick="change_num()" type="button">-</button>
						<input class="mui-input-numbox" id="number" onblur='change_num()'  type="number" value='1'>
						<button class="mui-btn mui-btn-numbox-plus" type="button" onclick="change_num()">+</button>
					</div>
				</div>
				<div class="mui-input-row">
					<label>入住人：</label>
					<input type="text" name="user_name" class="mui-input-group" value="{$user_info['user_name']} {if $user_info['level_name']!=''}({$user_info['level_name']}){/if}"  disabled='disabled'>
				</div>
				<div class="mui-input-row">
					<label>手机号：</label>
					<input type="text" name="mobile" class="mui-input-group" value="{$user_info['mobile']}" disabled='disabled'>
				</div>
				<div class="mui-input-row">
					<label>身份证号：</label>
					<input type="text" name="user_ids" id='user_ids' class="mui-input-group" placeholder="请输入身份证号">
				</div>
				<div class="mui-input-row">
					<label>选择到店时间：</label>
					<input type="text" name="dd_time" id='dd_time' data-options='{"type":"time"}' class="mui-input-group reach" placeholder="请选择到店时间">
				</div>
			</form>

		</div>
		
		<div class="mask detailed" id="detailed">
			<div class="phone_box">
				<div class="mui-input-row detl">
					<label>房费：</label>
					<input type="text" name="z_price" class="mui-input-group" value="￥{$list['room_price']}"  disabled='disabled'>
				</div>
				<div class="mui-input-row detl">
					<label>房间数量：</label>
					<input type="text" name="z_room" id='z_room' class="mui-input-group" value="1间"  disabled='disabled'>
				</div>
				<div class="mui-input-row detl">
					<label>预定天数：</label>
					<input type="text" name="days" id='days' class="mui-input-group" value="{$days}天"  disabled='disabled'>
				</div>
				<div class="mui-input-row detl">
					<label >应付金额：</label>
					<input type="text" name="yf_price" id='yf_money' class="mui-input-group" value="￥0" disabled='disabled'>
				</div>
				{if $user_info['level_name']!=''}
					<div class="mui-input-row detl">
						<label>会员折扣：</label>
						<input type="text" name="zk" id='zk' class="mui-input-group" value="{$user_info['discount'] ? $user_info['discount'] : 0}%"  disabled='disabled'>
					</div>
				{/if}
				<div class="mui-input-row detl">
					<label>优惠金额：</label>
					<input type="text" name="yh_money" id='yh_money' class="mui-input-group" value="￥0" disabled='disabled'>
				</div>
				<div class="mui-input-row detl">
					<label>实付金额：</label>
					<input type="text" name="sf_money" id='sf_money' class="mui-input-group" value="￥0"  disabled='disabled'>
				</div>
				
				<div class="dcyy_btn"><button type="button" onclick="javascript:$('.detailed').hide()">确定</button></div>
			</div>
		</div>
		
		
		<div class="mask queren">
			<div class="phone_box">
				<p class='sign_out' onclick="javascript:$('.queren').hide()"> X </p>
				<ul class="hycz_list xhd_list">
				<!--购买数据-->
					<li data-val="5">
						<div class="left"><img src="__INDEX__/img/hyk.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">会员卡支付</p>
						</div>
					</li>
					<li data-val="6">
						<div class="left"><img src="__INDEX__/img/kq.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">房券支付</p>
						</div>
					</li>
					<li data-val="2">
						<div class="left"><img src="__INDEX__/img/wx.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">微信支付</p>
						</div>
					</li>
					<li data-val="7">
						<div class="left"><img src="__INDEX__/img/dd.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">到店支付</p>
						</div>
					</li>
				</ul>
				<div class="dcyy_btn"><button type="button" class='que_pay'>确认支付</button></div>
			</div>
		</div>
		
	</body>

</html>

<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/layer/layer.min.js"></script>
<script src="__INDEX__/js/castapp.js"></script>
<script src="__INDEX__/js/mui.picker.min.js"></script>
<script src="__INDEX__/js/jquery.js"></script>
<script type="text/javascript">
	(function($) {
		$.init();
		var result = $('#result')[0];
		var btns = $('.reach');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {
					jQuery('#dd_time').val(rs.text);
					_self.picker.dispose();
					_self.picker = null;
				});
			}, false);
		});
	})(mui);
	
	jQuery(function(){
		change_num()
	});
</script>
<script type="text/javascript">	
	//计算订单明细
	function change_num() {
		var value = $("#number").val();//房间数量
		var room_num = "{$list['room_num']}";
		if(room_num == 0){
			value =1;
		}
		if(value <= 0) {
			value =1;
			$("#number").val(1);
		}
		if(Number(value)>Number(room_num)){
			$("#number").val(room_num);
			layer.msg("目前最多可预约"+room_num+'间房');
			return false;
		}
		var days= "{$days}";//预定订房天数
		var price = "{$list['room_price']}";//价格
		var yf_money = price*$("#number").val()*days;//应付金额
		var zk = "{$user_info['discount']}";//折扣  
		var sf_money = (price-price*zk/100)*value*days;//实付金额
		var yh_money = yf_money-sf_money;
		var level_id ="{$user_info.level_id}";//会员等级ID
		if(parseInt(level_id) != 0){ 
			$('#z_price').text('¥'+sf_money.toFixed(2));
		}
		
		$("#z_room").val(value+'间');  //房间数量
		$('#yf_money').val('¥'+yf_money.toFixed(2));
		$('#yh_money').val('¥'+yh_money.toFixed(2));
		$('#sf_money').val('¥'+sf_money.toFixed(2));
		$('#z_price').text('¥'+sf_money.toFixed(2));
	}
	
	function que_show(){
		var dd_time = $("#dd_time").val();
		var user_ids = $('#user_ids').val();
		var room_num = "{$list['room_num']}";
		if(parseInt(room_num) == 0){
			$('.order').attr('disabled',"true");
			layer.msg("房间数量不足，无法预订");
			return false;
		}
		if(!user_ids){
			layer.msg("请填入身份证");
			return false;
		}
		if(parseInt(user_ids.length) != parseInt(18)){
			layer.msg("请填入正确的身份证");
			return false;
		}
		if(dd_time == "") {
			layer.msg("请选择到店时间");
			return false;
		}
		$('.queren').show();
	}
	
	$(".hycz_list li").click(function(){
		$(".active").removeClass("active");
		$(this).addClass("active");
		$("#level_id").val($(this).data('val'));
		var zf_type=$(".active").data("val");
		var level_id ="{$user_info.level_id}";//会员等级ID  
		if(zf_type == 2 || zf_type == 7){
			if(parseInt(level_id) != 0){
				layer.msg("非会员卡支付，不享受折扣");
			}
		}
	})
	
	$(".que_pay").click(function(){
		var zf_type=$(".active").data("val");
		var balance ="{$user_info.balance}";
		if(zf_type==undefined){
			layer.msg("请选择支付方式");
			return;
		}
		if(zf_type==5){
			if(Number($('#sf_money').val())>Number(balance)){
				layer.msg("会员卡余额不足");
				return;
			}
		}else if(zf_type==6){
			var kq_hx = "{$user_info['kq_hx']}";
			var total_kq = "{$user_info['zs_num']}";
			if("{$user_info['level_id']}"<=0 || kq_hx>total_kq){
				layer.msg("暂无房券，请选择其他方式支付");
				return;
			}
		}
		var data = {};
		data['zf_type'] = zf_type;
		data['dd_time'] = $("#dd_time").val();
		data['start_time'] = "{$start_time}";
		data['end_time'] = "{$end_time}";
		data['room_num'] = $("#number").val();   //预约房间
		data['ids_num'] = $('#user_ids').val();
		data['room_id'] = "{$list['id']}";   //分类id
		data['discount'] = "{$user_info['discount']}";//折扣
		$.ajax({
			type: "post",
			url:  'room_order',
			data: data,
			success: function(date) {
				if(date.code==202){
					window.location.href=date.url;
				}else{
					layer.msg(date.msg);
					if(date.code==200){
						window.location.href='/index/member/reserve';
					}
				}
			}
		})
		
		
	})
</script>